<template>
	<view class="box e-flex-column" :style="[AppSkinVar]">
		<image class="e-m-b-38" v-if="type < 2" :src="$staticPath('user/success.png')" mode=""></image>
		<image class="e-m-b-38" v-else :src="$staticPath('order/error.png')" mode=""></image>
		<view class="e-m-b-30">
			{{ title }}
		</view>
		<view class="e-m-b-40">
			{{subTitle}}
		</view>
		<button @tap="$back()">{{ $t(`${type < 2 ? 'common.返回' : 'order.重新支付'}`) }}</button>
		<view class="info e-m-t-80 e-font-26" v-if="type < 2">
			<view class="e-flex e-flex-between e-m-b-10">
				<text>{{$t(`user.${type == 0 ? '到账用户' : '到账账户' }`)}}</text>
				<text>{{account}}</text>
			</view>
			<view class="e-flex e-flex-between e-m-b-10">
				<text>{{$t(`user.${type == 0 ? '转账额度' : '转换额度' }`)}}</text>
				<text>{{money}}</text>
			</view>
			<view class="e-flex e-flex-between e-m-b-10">
				<text>{{$t(`user.${type == 0 ? '转账时间' : '转换时间' }`)}}</text>
				<text>{{time}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useCurrentInstance } from '@/common/hooks'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const props = defineProps({
		type: String,
		account: String,
		money: String,
		time: String,
		msg: String
	})

	const ctx = useCurrentInstance()

	const pageTitle = ref('')
	const subTitle = ref('')


	onLoad(() => {
		let { title, sub } = [
			{ title: ctx.$t('user.转账成功'), sub: '转账提示' },
			{ title: ctx.$t('user.转换成功'), sub: '转换提示' },
			{ title: ctx.$t('user.转账失败'), sub: '' },
			{ title: ctx.$t('user.转换失败'), sub: '' }
		][props.type]

		uni.setNavigationBarTitle({
			title
		})

		pageTitle.value = title
		subTitle.value = sub ? ctx.$t(`user.${sub}`) : (props.msg || '')
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.box {
		padding-top: 158rpx;
		margin: 0 auto;

		image {
			width: 320rpx;
			height: 224rpx;
		}

		button {
			width: 278rpx;
			height: 90rpx;
			border-radius: 45rpx;
			border: 2rpx solid #303133;
		}

		.info {
			width: calc(100% - 60rpx);
			padding: 40rpx;
			background: #f7f7f7;
			border-radius: 10rpx;
			color: #989898;
		}
	}
	.e-flex-column {
		display:flex;
		flex-direction: column;
		align-items:center;
		justify-content:center;
	}
</style>